<!-- prettier-ignore -->
<template>
  <div class="problem">
    <el-row :gutter="16" style="height:100%" type="flex">
      <el-col :span="4" style="height:100%">
        <div class="tree-box">
          <wp-scrollbar :max-height="850" scrollbarColor="rgba(51,51,51,0.2)">
            <el-tree :data="treeData" :props="defaultProps" current-node-key="421102" default-expand-all highlight-current node-key="adcode">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span v-if="data.num">({{data.num}})</span>
              </span>
            </el-tree>
          </wp-scrollbar>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="12" style="margin-bottom: 10px">
          <el-col v-for="(item,index) in cardList" :key="index" :span="4">
            <div class="card">
              <div class="card-info">
                <div class="card-info-title">{{item.title}}</div>
                <div class="card-info-content">
                  <span :style="{color: item.color}" class="card-info-content-number">{{item.num}}</span>
                  {{item.unit}}
                </div>
              </div>
              <!--<img :src="require(`@/assets/images/addressSegment/${item.img}.png`)" alt="" class="card-img">-->
            </div>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" style="height:calc(100% - 167px)" type="border-card" >
          <el-tab-pane label="任务批次" name="1">
            <task-batch @setID="(id)=>taskId = id"></task-batch>
          </el-tab-pane>
          <el-tab-pane label="问题地址" name="2">
            <problem-type v-if="activeName === '2'" :taskId="taskId"></problem-type>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

import taskBatch from '@/views/qualityTest/problem/taskBatch.vue';
import problemType from '@/views/qualityTest/problem/problemType.vue';
export default {
  name: 'index',
  components:{taskBatch,problemType},
  data(){
    return{
      activeName:'1',
      taskId:'',
      defaultProps:{
        children: 'districts',
        label: 'name'
      },
      treeData:[
        {
          "citycode": [

          ],
          "adcode": "420000",
          "name": "湖北省",
          "center": "114.341552,30.546222",
          "level": "province",
          "districts": [
            {
              "citycode": "027",
              "num":"0",
              "adcode": "420100",
              "name": "武汉市",
              "center": "114.304569,30.593354",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0713",
              "num":"87",
              "adcode": "421100",
              "name": "黄冈市",
              "center": "114.872425,30.453722",
              "level": "city",
              "districts": [
                {
                  "citycode": "0713",
                  "num":"87",
                  "adcode": "421102",
                  "name": "黄州区",
                  "center": "114.880104,30.434354",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421181",
                  "name": "麻城市",
                  "center": "115.008011,31.172917",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421124",
                  "name": "英山县",
                  "center": "115.680953,30.734989",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421182",
                  "name": "武穴市",
                  "center": "115.595451,29.869602",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421121",
                  "name": "团风县",
                  "center": "114.872364,30.643225",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421123",
                  "name": "罗田县",
                  "center": "115.399149,30.783047",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421126",
                  "name": "蕲春县",
                  "center": "115.436423,30.226146",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421125",
                  "name": "浠水县",
                  "center": "115.265155,30.452212",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421127",
                  "name": "黄梅县",
                  "center": "115.944219,30.070453",
                  "level": "district"
                },
                {
                  "citycode": "0713",
                  "num":"0",
                  "adcode": "421122",
                  "name": "红安县",
                  "center": "114.618134,31.288167",
                  "level": "district"
                }
              ]
            },
            {
              "citycode": "0710",
              "num":"0",
              "adcode": "420600",
              "name": "襄阳市",
              "center": "112.121743,32.010161",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0719",
              "num":"0",
              "adcode": "420300",
              "name": "十堰市",
              "center": "110.798921,32.629057",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0717",
              "num":"0",
              "adcode": "420500",
              "name": "宜昌市",
              "center": "111.286962,30.69217",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "1728",
              "num":"0",
              "adcode": "429006",
              "name": "天门市",
              "center": "113.166545,30.663706",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "2728",
              "num":"0",
              "adcode": "429005",
              "name": "潜江市",
              "center": "112.900279,30.401954",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0712",
              "num":"0",
              "adcode": "420900",
              "name": "孝感市",
              "center": "113.956962,30.918311",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0724",
              "num":"0",
              "adcode": "420800",
              "name": "荆门市",
              "center": "112.199009,31.035445",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0718",
              "num":"0",
              "adcode": "422800",
              "name": "恩施土家族苗族自治州",
              "center": "109.488076,30.272104",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0728",
              "num":"0",
              "adcode": "429004",
              "name": "仙桃市",
              "center": "113.442973,30.328407",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0716",
              "num":"0",
              "adcode": "421000",
              "name": "荆州市",
              "center": "112.24143,30.336282",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0715",
              "num":"0",
              "adcode": "421200",
              "name": "咸宁市",
              "center": "114.322601,29.84135",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "1719",
              "num":"0",
              "adcode": "429021",
              "name": "神农架林区",
              "center": "110.675879,31.745103",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0722",
              "num":"0",
              "adcode": "421300",
              "name": "随州市",
              "center": "113.382324,31.690275",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0711",
              "num":"0",
              "adcode": "420700",
              "name": "鄂州市",
              "center": "114.894909,30.391461",
              "level": "city",
              "districts": []
            },
            {
              "citycode": "0714",
              "num":"0",
              "adcode": "420200",
              "name": "黄石市",
              "center": "115.038999,30.201082",
              "level": "city",
              "districts": []
            }
          ]
        }
      ],
      cardList:[
        {
          title: "质检任务数量",
          num: 2,
          color: "#4C94FE",
          img: "all-task",
          unit:'个'
        },
        {
          title: "剩余问题地址",
          num: 87,
          color: "#6962FE",
          img: "running-task",
          unit:'条'
        },
        {
          title: "信息缺失或重复",
          num: 16,
          color: "#30C68A",
          img: "completed-task",
          unit:'条'
        },
        {
          title: "信息合规性",
          num: 37,
          color: "#30C68A",
          img: "completed-task",
          unit:'条'
        },
        {
          title: "信息一致性",
          num: 18,
          color: "#30C68A",
          img: "completed-task",
          unit:'条'
        },
        {
          title: "信息一致性",
          num: 16,
          color: "#30C68A",
          img: "completed-task",
          unit:'条'
        }
      ]
    }
  },
  mounted(){
  },
  methods:{
  }
};
</script>

<style lang="less" scoped>
.problem{
  width: 100%;
  height: 100%;
  .tree-box{
    height: 100%;
    background: #fff;
    padding: 16px
  }
  .card {
    background: #fff;
    width: 100%;
    height: 144px;
    padding: 25px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    &-info {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-title {
        font-size: 20px;
        font-weight: 900;
        color: #333;
      }
      &-content {
        font-size: 16px;
        color: #666;
        vertical-align: bottom;
        font-weight: 900;
        &-number {
          font-size: 36px;
          font-weight: 500;
          margin-right: 16px;
          font-style: italic;
        }
      }
    }
    &-img {
      width: 86px;
      height: 86px;
    }
  }
}
</style>